<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Order Form</title>
	<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css"/>
	<script defer src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
	<link rel="stylesheet" href="./css/style.css">
	<script defer src="./js/script.js"></script>
	<script defer src="./js/just-validate.min.js"></script>
	<script src="./js/choices.min.js"></script>
	<script defer src="./js/inputmask.min.js"></script>
	<script src="./js/validate.js"></script>
</head>
<body>
<header class="header__container">
	<div class="container">
		<nav class="header-nav">
			<a class="logo__link" href="#"><img src="images/logo.svg" alt="логотип" class="logo"></a>
			<ul class="nav-list">
				<li class="nav-item">
					<a class="nav-link" href="index.html">О нас</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="services.html">Туры</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Скидки</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Билеты</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
	<div class="header-nav__mobile_container">
		<div class="burger">
			<span></span>
		</div>
		<nav class="header-nav__mobile">
			<ul class="nav-list__mobile">
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="index.html">О нас</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="services.html">Туры</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="#">Скидки</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="#">Билеты</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
</header>
<main>
	<div class="form-container">
		<div class="container">
			<form id="form" autocomplete="off" action="index.html" class="form">
				<h1 class="form-title">Данные для отправки</h1>
				<label for="name">
					<input class="input-text" id="name" type="text" placeholder="Ваше имя" data-validate-field="name">
				</label>
				<label for="email">
					<input class="input-text" id="email" type="email" placeholder="email" data-validate-field="email">
				</label>
				<label for="tel">
					<input class="input-text" id="tel" type="tel" placeholder="Телефон" data-validate-field="tel">
				</label>
<!--				<label for="password">-->
<!--					<input class="input-text" id="password" type="password" placeholder="Пароль">-->
<!--				</label>-->
				<label for="selectCustom">
					<select name="select" id="selectCustom">
						<option value="">--- Не выбрано ---</option>
						<option value="">Куба</option>
						<option value="">Испания</option>
						<option value="">Португалия</option>
						<option value="">Италия</option>
						<option value="">Турция</option>
					</select>
				</label>
				<label for="textarea">
					<textarea class="input-text" name="input-text" id="textarea" cols="30" rows="10"
					          placeholder="Сообщение"></textarea>
				</label>
				<div class="my-scroll">
					<div class="custom-scroll" data-simplebar>
						<h3 class="scroll__title">Лицензия</h3>
						<div class="scroll-text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam, aspernatur atque aut blanditiis
							cum doloribus eligendi ex illo impedit in ipsum labore laboriosam laborum magnam maiores minima officia
							possimus quia quisquam quo quos ratione rerum sed tenetur unde voluptas. Aliquid doloremque ea expedita
							facilis in nam officia officiis quibusdam rem vitae. Aperiam corporis eius eveniet ipsum quas saepe
							temporibus vero voluptatem? Architecto debitis dignissimos est excepturi, labore odit repellat
							temporibus voluptatum? Atque debitis deleniti dolorum ducimus earum eius, facere incidunt iste labore
							nulla numquam, omnis optio pariatur, quam qui ratione recusandae reiciendis tempore tenetur unde.
							Blanditiis consequuntur culpa cum cupiditate eos laboriosam maiores quidem repellendus sed tenetur vel,
							voluptas? Ad, animi, aut dignissimos doloremque eaque eos eum fuga necessitatibus, nihil praesentium
							quas qui quidem ratione reprehenderit tempore vel voluptatum! Alias corporis eveniet exercitationem
							fugit hic in ipsum iste, minima molestias quasi, quibusdam ratione reiciendis rem tempore ut vitae
							voluptas. Aliquam amet animi architecto commodi cumque error fugit id impedit incidunt ipsa iste, itaque
							laudantium magnam, maxime modi mollitia nihil nobis non odio perferendis placeat possimus quam qui
							quisquam quos repellendus sit tempora, tenetur velit vero. Adipisci aliquid cum debitis deleniti dicta,
							earum, eum iusto laudantium neque ratione reiciendis, sapiente. Ab alias aliquid, architecto beatae
							blanditiis corporis culpa dolorum eius eos exercitationem ipsa iure mollitia repellat sunt, vitae! A
							adipisci aut culpa, deserunt distinctio dolor dolorem ducimus ea earum eligendi eum harum illo in ipsam
							iure molestias nihil officia perspiciatis possimus quas quasi quo suscipit tempora totam veritatis
							voluptates, voluptatum. Debitis earum est nulla quam quidem repellendus sed voluptatum? Accusamus alias
							doloremque doloribus iste laborum necessitatibus officia quas quod sed. Accusamus alias asperiores culpa
							cum deleniti dolorem dolores eaque eius, eligendi est excepturi incidunt iure magni maiores pariatur
							porro quae quaerat qui reprehenderit saepe similique sit tempora tempore totam vero vitae voluptas. Ab
							asperiores at consequuntur cumque debitis distinctio doloribus ducimus error eveniet ex explicabo, hic
							laborum nisi odit pariatur quae reiciendis rem repellendus temporibus vel. Architecto at dolor dolorem
‹							laudantium mollitia pariatur quasi suscipit. Consectetur consequuntur, cum dolore error exercitationem
							maxime nemo optio quia quo veritatis. Ab aliquam delectus placeat quaerat repellendus. Accusamus
							accusantium amet asperiores, atque, autem blanditiis debitis distinctio doloribus ea eaque earum enim et
							fuga ipsum labore nihil nobis nostrum numquam optio provident quaerat qui, sed sit temporibus voluptate.
							Ad alias aspernatur consectetur cupiditate delectus, eius enim error harum hic, labore minus mollitia
							pariatur placeat reprehenderit voluptas! Accusamus, architecto assumenda consequuntur deserunt
							distinctio dolore doloremque enim eos est exercitationem, facilis illo in ipsum itaque magni maiores nam
							nulla officia quasi quis quisquam reprehenderit repudiandae saepe vitae voluptas. Accusamus consequuntur
							dignissimos dolor eos magnam molestiae mollitia quaerat, qui sint voluptatibus. Accusamus alias corporis
							delectus dolor doloremque, dolores eius error eveniet fugiat harum modi nobis non quam ratione totam ut
							veniam? Ab adipisci, aliquam asperiores assumenda, autem commodi dolore eligendi magni perferendis
							possimus reiciendis velit! Accusantium ad asperiores consequuntur corporis cumque distinctio dolor
							dolorem ducimus ea illo iusto laborum maxime numquam, perferendis qui reiciendis sint tempora vel
							voluptas.
						</div>
					</div>
				</div>
				<label for="checkbox">
					<input class="input-text__checkbox" type="checkbox" id="checkbox" aria-label="Сщгласие на обработку данных">Согласие на обработку данных
					<span></span>
				</label>
				<button class="button button__input" type="submit">Отправить данные</button>
				<button class="button button__input" type="reset">Стереть данные</button>
			</form>
		</div>
	</div>
</main>
<footer class="footer__container">
	<div class="container">
		<nav class="footer-nav">
			<a class="logo__link" href="#"><img src="images/logo.svg" alt="логотип" class="logo"></a>
			<ul class="footer-list">
				<li class="footer-item">
					<a class="footer-link" href="index.html">О нас</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="services.html">Туры</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="#">Скидки</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="#">Билеты</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
</footer>
</body>
</html>